<template>
    <div class="wrap1" v-if="showLang" @click="fn" >
        <li >
            <el-checkbox v-model="checked1" label="IPO Status" text-color="blue" />
         </li>
         <li >
            <el-checkbox v-model="checked2" label="Trading Currency" /> 
         </li>
         <li >
            <el-checkbox v-model="checked3" label="Offering Type" /> 
         </li>
         <li >
            <el-checkbox v-model="checked4" label="Securities to be Listed" /> 
         </li>
         <li >
            <el-checkbox v-model="checked5" label="Relaunch" /> 
         </li>
         <li >
            <el-checkbox v-model="checked6" label="Listing Platform" /> 
         </li>
         <li >

            <el-checkbox v-model="checked7" label="Listing Type" /> 
         </li>
    </div>
</template>

<script lang="ts">
export default {
    name: "XSearchCup",
};
</script>

<script lang="ts" setup>

import { ref, defineExpose } from 'vue';

const showLang = ref(false)
const checked1 = ref(false)
const checked2 = ref(false)
const checked3 = ref(true)
const checked4 = ref(true)
const checked5 = ref(false)
const checked6 = ref(true)
const checked7 = ref(true)
defineExpose({
    showLang
})
const fn=(e:any)=>{
    console.log('阻止')
    e.stopPropagation();
}
</script>

<style lang="scss" scoped>
.wrap1 {
    width: fit-content;
    // height: 150px;
    background-color: #fff;
    border: 1px solid #A1A1A1;
    border-radius: 4px;


    padding-top: 5px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    position: relative;
    z-index: 1;
    li {
        line-height: 50px;
        display: flex;
        :deep(.el-checkbox__label){
            display: block ;
            font-family: "Calibri";
            color: #1C3F56;
            font-weight: 580;
            font-size: 12px;
            width: 90px;
            white-space:pre-wrap;
            overflow: hidden;
        }
        :deep(.el-checkbox__inner:hover){
            border-color:#000000;
        }
        :deep(.el-checkbox__input.is-checked .el-checkbox__inner ){
             background-color: #000000;
             border-color:#000000;
        }
        span{
            font-size: 12px;
        }
    }


}
</style>